<template>
<bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :widthSize="true" :hideMask="true">
      <div slot="main" class="textColor" style="position:relative">
        <img class="cyyOutViewLogo" src="../../../../../static/img/cyy/cyyLogo2.png">
        <div class="positionTitle">
              <p class="title"><i></i>地域成交热度分析</p>
        </div>
        <div class="mapCon">
          <commerce-map :areaData="quantity" v-model="buy_items" :placeData="[]"></commerce-map>
        </div>
        <div class="row topCon">
          <div class="item">
            <chart-lay-out :showLine="false">
              <span slot="title">电商平台收入额</span>
              <div slot="main" style="margin-left: 16px;">
                <div class="row">
                  <div class="row flexItem">
                    <div class="toolTipCon">
                      <p v-if="vmIndustrialParkEcommerceData.tradingVolumeThisWeekRingRatio >= 0">环比上升</p>
                      <p v-else>环比下降</p>
                      <p>
                        {{Math.abs(vmIndustrialParkEcommerceData.tradingVolumeThisWeekRingRatio)}}%
                      </p>
                    </div>
                    <div class="boldFont flexText">
                      <p class="text">本周交易额</p>
                        <p class="number">
                          <span class="positionICountUp">
                            <i-count-up
                              :startVal="startVal"
                              :endVal="vmIndustrialParkEcommerceData.tradingVolumeThisWeek"
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            />
                            <img class="downOrUp" :src="vmIndustrialParkEcommerceData.tradingVolumeThisWeekRingRatio >= 0 ? '../../../../../static/img/cyy/up.png' : '../../../../../static/img/cyy/down.png'"  >
                          </span>
                        </p>
                    </div>
                  </div>
                  <div class="row flexItem">
                    <div class="toolTipCon">
                      <p v-if="vmIndustrialParkEcommerceData.tradingVolumeThisMonthRingRatio  >= 0">环比上升</p>
                      <p v-else>环比下降</p>
                      <p>
                        {{Math.abs(vmIndustrialParkEcommerceData.tradingVolumeThisMonthRingRatio )}}%
                      </p>
                    </div>
                    <div class="boldFont flexText">
                      <p class="text">本月交易额</p>
                      <p class="number">
                          <span class="positionICountUp">
                            <i-count-up
                              :startVal="startVal"
                              :endVal="vmIndustrialParkEcommerceData.tradingVolumeThisMonth"
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            />
                            <img class="downOrUp" :src="vmIndustrialParkEcommerceData.tradingVolumeThisMonthRingRatio  >= 0 ? '../../../../../static/img/cyy/up.png' : '../../../../../static/img/cyy/down.png'"  >
                          </span>
                        </p>
                    </div>
                  </div>
                  <div class="row flexItem">
                    <div class="toolTipCon">
                      <p v-if="vmIndustrialParkEcommerceData.tradingVolumeThisYearRingRatio >= 0">环比上升</p>
                      <p v-else>环比下降</p>
                      <p>
                        {{Math.abs(vmIndustrialParkEcommerceData.tradingVolumeThisYearRingRatio )}}%
                      </p>
                    </div>
                    <div class="boldFont flexText">
                      <p class="text">年度累计交易额</p>
                      <p class="number">
                          <span class="positionICountUp">
                            <i-count-up
                              :startVal="startVal"
                              :endVal="vmIndustrialParkEcommerceData.tradingVolumeThisYear "
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            />
                            <img class="downOrUp" :src="vmIndustrialParkEcommerceData.tradingVolumeThisYearRingRatio  >= 0 ? '../../../../../static/img/cyy/up.png' : '../../../../../static/img/cyy/down.png'"  >
                          </span>
                        </p>
                    </div>
                    <div>
                    </div>
                  </div>
                </div>
              </div>
          </chart-lay-out>
          </div>
            <div class="itemLine"></div>
          <div class="item">
            <chart-lay-out :showLine="false">
              <span slot="title">电商平台成交量</span>
              <div slot="main" style="margin-left: 16px;">
                <div class="row" >
                    <div class="row flexItem">
                      <div class="toolTipCon">
                        <p v-if="vmIndustrialParkEcommerceData.volumeThisWeekRingRatio >= 0">环比上升</p>
                      <p v-else>环比下降</p>
                      <p>
                        {{Math.abs(vmIndustrialParkEcommerceData.volumeThisWeekRingRatio)}}%
                      </p>
                      </div>
                      <div class="boldFont flexText">
                      <p class="text">本周成交订单量</p>
                        <p class="number">
                            <span class="positionICountUp">
                              <i-count-up
                                :startVal="startVal"
                                :endVal="vmIndustrialParkEcommerceData.volumeThisWeek "
                                :decimals="decimals"
                                :duration="duration"
                                :options="options"
                              />
                              <img class="downOrUp" :src="vmIndustrialParkEcommerceData.volumeThisWeekRingRatio >= 0 ? '../../../../../static/img/cyy/up.png' : '../../../../../static/img/cyy/down.png'"  >
                            </span>
                          </p>
                      </div>
                    </div>
                    <div class="row flexItem">
                      <div class="toolTipCon">
                        <p v-if="vmIndustrialParkEcommerceData.volumeThisMonthRingRatio >= 0">环比上升</p>
                        <p v-else>环比下降</p>
                        <p>
                          {{Math.abs(vmIndustrialParkEcommerceData.volumeThisMonthRingRatio)}}%
                        </p>
                      </div>
                      <div class="boldFont flexText">
                        <p class="text">本月成交订单量</p>
                        <p class="number">
                            <span class="positionICountUp">
                              <i-count-up
                                :startVal="startVal"
                                :endVal="vmIndustrialParkEcommerceData.volumeThisMonth"
                                :decimals="decimals"
                                :duration="duration"
                                :options="options"
                              />
                              <img class="downOrUp" :src="vmIndustrialParkEcommerceData.volumeThisMonthRingRatio >= 0 ? '../../../../../static/img/cyy/up.png' : '../../../../../static/img/cyy/down.png'"  >
                            </span>
                          </p>
                      </div>
                    </div>
                    <div class="row flexItem">
                      <div class="toolTipCon">
                        <p v-if="vmIndustrialParkEcommerceData.volumeThisYearRingRatio >= 0">环比上升</p>
                        <p v-else>环比下降</p>
                        <p>
                          {{Math.abs(vmIndustrialParkEcommerceData.volumeThisYearRingRatio)}}%
                        </p>
                      </div>
                      <div class="boldFont flexText">
                        <p class="text">年度累计成交量</p>
                        <p class="number">
                            <span class="positionICountUp">
                              <i-count-up
                                :startVal="startVal"
                                :endVal="vmIndustrialParkEcommerceData.volumeThisYear"
                                :decimals="decimals"
                                :duration="duration"
                                :options="options"
                              />
                              <img class="downOrUp" :src="vmIndustrialParkEcommerceData.volumeThisYearRingRatio >= 0 ? '../../../../../static/img/cyy/up.png' : '../../../../../static/img/cyy/down.png'"  >
                            </span>
                          </p>
                      </div>
                      <div>
                      </div>
                    </div>
                </div>
              </div>
          </chart-lay-out>
          </div>
        </div>
        <div class="BottomCenterCon">
          <chart-lay-out :showLine="false">
              <span slot="title">商品交易/成交量TOP5</span>
              <el-select slot="subText" style="width:120px;margin-right:-10px"  @change="fetchData" v-model="goodsDefault">
                <el-option v-for="item in goodsArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <div slot="main" style="margin-left:40px">
                <table class="gridtable">
                  <tr>
                    <th class="firstColumn">排名</th>
                    <th class="secondColumn">商品名称</th>
                    <th class="thirdColumn">成交量</th>
                  </tr>
                  <div class="gridTableHeight"></div>
                  <tr v-if="top5List.length >= 1" v-for="item in top5List" :key="item.id">
                    <td class="firstColumn">{{item.id}}</td>
                    <td class="secondColumn">{{item.name}}</td>
                    <td class="thirdColumn">{{item.number}}</td>
                  </tr>
                  <div v-else class="tableNoData">暂无数据</div>
                  <div class="gridTableHeight"></div>
                </table>
              </div>
          </chart-lay-out>
        </div>
        <div class="bottomLeftCon">
          <chart-lay-out :showLine="false">
              <span slot="title">地域成交访客与支付占比</span>
              <div slot="main" style="margin-left:40px">
                <table class="gridtable">
                  <tr>
                    <th class="dyFirstColumn">地域</th>
                    <th class="dySecondColumn" style="padding-left: 10%;">销售额</th>
                    <th style="text-align:center">支付买家数占比</th>
                  </tr>
                  <div class="gridTableHeight"></div>
                  <tr v-if="proportionList.length >= 1" v-for="(item, index ) in proportionList" :key="index">
                    <td class="dyFirstColumn">{{item.name}}</td>
                    <td class="dySecondColumn flexTd boldFont">
                      <span class="flexTdLeft">{{item.value1}}</span>
                      <div class="flexTdRight">
                        <div class="progressBar" :style="{'width':item.value2+'%','background':item.color}"></div>
                      </div>
                    </td>
                    <td class="dyThirdColumn boldFont">{{item.value2}}%</td>
                  </tr>
                  <div v-else class="tableNoData">暂无数据</div>
                  <div class="gridTableHeight"></div>
                </table>
              </div>
          </chart-lay-out>
        </div>
        <div class="topRightCon">
          <chart-lay-out :showLine="false" style="margin-top:35px">
              <span slot="title">交易额趋势分析</span>
              <el-select slot="subText" style="width:80px;margin-right:-9.5px"  @change="GMVChange" v-model="GMVDefault">
                <el-option v-for="item in tradeSelArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <div slot="main">
                <bar-line-charts v-model="GMVArr" :option="tradeTrendOption"></bar-line-charts>
              </div>
          </chart-lay-out>
        </div>
        <div class="bottomRightCon">
        <chart-lay-out :showLine="false" style="margin-top:35px">
              <span slot="title">订单成交量趋势</span>
              <el-select slot="subText" style="width:80px;margin-right:-9.5px"  @change="orderQuantityChange" v-model="orderQuantityDefault">
                <el-option v-for="item in tradeSelArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <div slot="main">
                <bar-line-charts v-model="orderQuantity" :option="tradeTrendOption2"></bar-line-charts>
              </div>
        </chart-lay-out>        
        </div>
      </div>
</bg-lay-out>
</template>
<script>
import commerceMap from "@/components/cyy/eCommerceMap";
import bgLayOut from "@/components/bgLayOut";
import chartLayOut from "@/components/Charts/chartLayOut";
import ICountUp from "vue-countup-v2";
import barLineCharts from "@/components/Charts/barLineCharts";
import {
  GetIndustrialParkEcommerceData,
  GetDataByDoubleTarget,
  GetDetailList
  // GetDeliveryAreaHeat
} from "@/api/cyy/IndustrialParkForEcommerce";
export default {
  components: { bgLayOut, chartLayOut, ICountUp, barLineCharts, commerceMap },
  data() {
    return {
      vmIndustrialParkEcommerceData: {
        "tradingVolumeThisWeek": 0,
        "tradingVolumeThisMonth": 0,
        "tradingVolumeThisYear": 0,
        "tradingVolumeThisWeekRingRatio": 0,
        "tradingVolumeThisMonthRingRatio": 0,
        "tradingVolumeThisYearRingRatio": 0,
        "volumeThisWeek": 0,
        "volumeThisMonth": 0,
        "volumeThisYear": 0,
        "volumeThisWeekRingRatio": 0,
        "volumeThisMonthRingRatio": 0,
        "volumeThisYearRingRatio": 0
      }, // 整体数据
      goodsArr: [
        {
          value: "0",
          label: "按商品交易"
        },
        {
          value: "1",
          label: "按成交量"
        }
      ],
      goodsDefault: "0",
      buy_items: [],
      netWorkAdd: [], // 产业园网点数据
      mapData: [], // 地图数据
      GMVDefault: "3007", // 交易额
      orderQuantityDefault: "3007", // 销售量
      GMVArr: [], // 交易额图表数据
      tradeSelArr: [
        {
          value: "3007",
          label: "本周"
        },
        {
          value: "3008",
          label: "本月"
        },
        {
          value: "3010",
          label: "本年"
        }
      ],
      orderQuantity: [], // 订单量
      tradeTrendOption: {
        // xAxis: {
        //   axisLabel: {
        //     rotate: 0
        //   }
        // },
        grid: {
          bottom: "30%"
        },
        unit: ["¥", "%", "%"]
      },
      tradeTrendOption2: {
        grid: {
          bottom: "30%"
        },
        unit: ["", "%", "%"]
      },
      sell_all: 55555555,
      sell_nums: 5555,
      sell_Money: 222,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      top5List: [
        {
          id: 1,
          name: "瑜伽垫",
          number: 5555
        },
        {
          id: 2,
          name: "哑铃",
          number: 4444
        },
        {
          id: 3,
          name: "自行车",
          number: 222
        },
        {
          id: 4,
          name: "尿不湿",
          number: 111
        },
        {
          id: 5,
          name: "锤子",
          number: 11
        }
      ],
      proportionList: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // 改变条件触发交易额趋势分析
    GMVChange() {
      this.fetchTradeTrend(); // 交易额趋势分析
    },
    // 改变条件触发订单成交量趋势分析
    orderQuantityChange() {
      this.fetchOrderQuantity(); // 订单成交量趋势分析
    },
    // 整体数据
    async fetchVmIndustrialParkEcommerceData() {
      try {
        const res = await GetIndustrialParkEcommerceData();
        if (res.data.code === "0") {
          const resData = res.data.result;
          this.$set(this, "vmIndustrialParkEcommerceData", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 地域成交访客与支付占比
    async fetchProportionList() {
      try {
        const params = {
          "timeType": "3008",
          "queryType": "34004"
        };
        const res = await GetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          const resData = res.data.result.slice(0, 5);
          var colors = ["#663cfd", "#4b61fd", "#19aefe", "#00d3fe", "#00d3fe"]
          for (var i = 0; i < resData.length; i++) {
            resData[i].color = colors[i]
          }
          this.$set(this, "proportionList", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 交易额趋势分析
    async fetchTradeTrend() {
      try {
        const params = {
          "timeType": this.GMVDefault,
          "queryType": "34001"
        };
        const res = await GetDetailList(params);
        if (res.data.code === "0") {
          const resData = res.data.result
          const chartArr = [
            {
              type: "bar",
              name: "交易额",
              value: resData.reList,
              option: {}
            },
            {
              type: "line",
              name: "同比",
              value: resData.yearOnYearList,
              option: {}
            },
            {
              type: "line",
              name: "环比",
              value: resData.ringRatioList,
              option: {}
            }
          ];
          this.$set(this, "GMVArr", chartArr);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 订单成交量趋势分析
    async fetchOrderQuantity() {
      try {
        const params = {
          "timeType": this.orderQuantityDefault,
          "queryType": "34002"
        };
        const res = await GetDetailList(params);
        if (res.data.code === "0") {
          const resData = res.data.result
          const chartArr = [
            {
              type: "bar",
              name: "成交量",
              value: resData.reList,
              option: {}
            },
            {
              type: "line",
              name: "同比",
              value: resData.yearOnYearList,
              option: {}
            },
            {
              type: "line",
              name: "环比",
              value: resData.ringRatioList,
              option: {}
            }
          ];
          this.$set(this, "orderQuantity", chartArr);
        }
      } catch (error) {
        console.log(error);
      }
    },
    fetchData() {
      this.fetchVmIndustrialParkEcommerceData(); // 整体数据查询
      this.fetchProportionList(); // 地域成交访客与支付占比
      this.fetchTradeTrend(); // 交易额趋势分析
      this.fetchOrderQuantity(); // 订单成交量趋势分析
    }
  }
};
</script>
<style>
@import "../../../../styles/element-ui/select.css";
</style>
<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.flexItem .toolTipCon {
  display: none;
}
.flexItem:hover .toolTipCon {
  @include flex-dc-ic-jc;
  position: absolute;
  top: -70px;
  left: 30px;
  z-index: 20;
  width: 76px;
  height: 70px;
  color: #2ff0d2;
  font-size: 2px;
  text-align: center;
  background: rgba(#000,0.8);
  background-size: 100% 100%;
  border-radius: 10px;
}
.gridTableHeight {
  height: 10px;
}
.selectCon {
  position: absolute;
  right: 10px;
  z-index: 100;
  width: 100px;
}
.bottomRightCon, .topRightCon {
  position: absolute;
  right: 40px;
  top: 648px;
  width: 500px;
  height: 411px;
  @include moduleBg(bg_500x412);
}
 .topRightCon{
  top: 220px;
}
.positionTitle .title i {
  display: inline-block;
  width: 3px;
  height: 15px;
  margin-right: 10px;
  background-color: #2ff0d2;
}
.positionTitle {
  font-size: 20px;
  line-height: 20px;
  position: absolute;
  top: 256px;
  left: 110px;
}
.bottomLeftCon {
  position: absolute;
  left: 70px;
  top: 725px;
  width: 816px;
  height: 332px;
  @include moduleBg(bg_815x333);
}
.BottomCenterCon {
  position: absolute;
  right: 556px;
  top: 725px;
  width: 461px;
  height: 332px;
  @include moduleBg(bg_459x333);
}
.topCon .item {
  width: 50%;
  height: 100%;
}
.topCon {
  position: absolute;
  left: 70px;
  top: 20px;
  /* justify-content: space-around; */
  /* align-items: center; */
  width: 1293px;
  height: 191px;
  @include moduleBg(bg_1294x192);
}
.itemLine {
  width: 1px;
  height: 120px;
  background: rgba(47, 240, 210, 0.3);
}
.planChartItem {
  width: 50%;
  text-align: center;
}
.planChartItem .leftText {
  position: absolute;
  left: 17%;
  top: 23%;
}
.planChartItem .rightText {
  position: absolute;
  left: 64%;
  top: 23%;
}
.shipmentData {
  padding: 40px 0 0 40px;
}
.shipmentData .title {
  display: flex;
  align-items: center;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cyyOutViewLogo {
  position: absolute;
  top: 110px;
  width: 300px;
  height: 40px;
  right: 140px;
  z-index: 99;
}
.mapCon {
  position: absolute;
  top: -8px;
  left: 40px;
}
.flexText {
  text-align: left;
}
.bg4Con {
  @include flex-dc-ic;
  @include absoluteAllSides;
  width: 100%;
  height: 1080px;
}
.topCon .text span {
  font-size: 15px;
  margin-left: 10px;
}
.topCon .text {
  font-size: 16px;
}
.topCon .item .number span {
  font-size: 40px;
  margin-bottom: 10px;
}
.flexItem {
  position: relative;
  margin-top: 12px;
  margin-left: 3.5%;
  width: 33%;
}
.flexItem p:nth-of-type(2) {
  line-height: 1.2;
}
.positionICountUp {
  position: relative;
}
.downOrUp {
  position: absolute;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 10px;
  bottom: 10px;
  right: -20px;
}
table.gridtable {
  font-size: 16px;
  color: white;
  width: 100%;
  margin-top: 20px;
}
table.gridtable th {
  padding: 8px;
  height: 40px;
  background-color: rgba(0, 209, 255, 0.2);
  color: #2ff0d2;
}
table.gridtable th:last-child {
  border-right: none;
}
table.gridtable td {
  height: 30px;
  border-right: 1px solid rgba(47, 240, 210, 0.2);
  background-color: rgba(0, 0, 0, 0);
  color: #00d1ff;
}
table.gridtable td:last-child {
  border-right: none;
}
table.gridtable .firstColumn {
  width: 20%;
  text-align: center;
}
table.gridtable .secondColumn {
  width: 40%;
  padding: 0 7%;
  text-align: left;
}
table.gridtable .thirdColumn {
  width: 40%;
  padding: 0 7%;
  text-align: left;
}
table.gridtable .dyFirstColumn {
  width: 12%;
  text-align: center;
}
table.gridtable .dySecondColumn {
  text-align: left;
}
table.gridtable .dyThirdColumn {
  width: 25%;
  text-align: right;
  padding-right: 5%;
}
table.gridtable .flexTd {
  display: flex;
  align-items: center;
}
.flexTdLeft {
  width: 14%;
  display: inline-block;
  text-align: right;
  margin-right: 10px;
}
.flexTdRight {
  width: 70%;
  display: inline-block;
}
.progressBar {
  height: 14px;
}
.tableNoData{
  text-align: center;
  padding-top: 20px;
  color: rgb(204, 204, 204);
  display: table-cell;
}
</style>